<template>
	<view class="content">
		<!-- 订单 开始 -->
		<view class="content_list" style="padding: 25rpx 0 100rpx 0;">
			<uni-swipe-action>
				<uni-swipe-action-item style="margin-bottom: 25rpx;" v-for="(item,index) in cartList" :key="index" :right-options="options"
				 @click="bindClick(item.goods_id)" @change="swipeChange($event, item.goods_id)">
					<view class="list" style="width: 690rpx;margin-bottom: 25rpx;">
						<image style="width: 32rpx;height: 32rpx;margin-left: 25rpx;" @click="changeFlag(item.flag,item.goods_id,index)"
						 v-if="item.flag==false" src="../../static/icon/chose_icon.png"></image>
						<image style="width: 32rpx;height: 32rpx;margin-left: 25rpx;" v-else @click="changeFlag(item.flag,item.goods_id,index)"
						 src="../../static/icon/chose_icon_select.png"></image>
						<image @click="goGoodsDetails(item.goods_id,index)" class="shop_image" :src="imgUrl+item.goods_image"
						 mode=""></image>
						<view class="title">
							<view class="name ellipsis_more ellipsis_more_2">{{item.goods_name}}</view>
							<view class="ac">
								<view class="mony">
									¥{{item.price}}
								</view>
								<view class="caozuo">
									<text class="jian" @click="editNum(0,item.goods_id,item.goods_num)">-</text>
									<text>{{item.goods_num}}</text>
									<text class="jia" @click="editNum(1,item.goods_id,item.goods_num)">+</text>
								</view>
							</view>
						</view>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
			<view class="no_thing" v-if="cartList.length==0">
				<image src="../../static/icon/no_shop.png"></image>
				<view class="no_thing_text">暂无内容</view>
			</view>
		</view>

		<!-- 订单 结束 -->
		<!-- 结算 开始 -->
		<view class="dw" v-if="cartList.length!=0">
			<view class="display align-items" style="font-size: 24rpx;">
				<image style="width: 32rpx;height: 32rpx;margin: 0 15rpx 0 25rpx;" @click="getAllchose(0)" v-if="Allflag==false" src="../../static/icon/chose_icon.png"></image>
				<image style="width: 32rpx;height: 32rpx;margin: 0 15rpx  0 25rpx;" v-else @click="getAllchose(1)" src="../../static/icon/chose_icon_select.png"></image>
				全选
			</view>
			<view class="right">
				<view class="hj">
					合计<text>:¥{{sumPrice}}</text>
				</view>
				<view class="js" @click="settlement">
					结算({{number}})
				</view>
			</view>
		</view>
		<!-- 结算 结束 -->
		<is-login v-on:childClick='listenToClose' v-on:childClickAgain='listenToCloseAgain' v-if="isLogin==0"></is-login>
	</view>
</template>

<script>
	import isLogin from '../../components/isLogin.vue'
	import {
		uniIcons,
		uniSwipeAction,
		uniSwipeActionItem,
	} from '@dcloudio/uni-ui'
	export default {
		components: {
			uniIcons,
			uniSwipeAction,
			uniSwipeActionItem,
			isLogin,
		},
		data() {
			return {
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#fff',
						color: '#333'
					}
				}],
				cartList: [],
				Allflag: false,
				isLogin:1,
				imgUrl:''
			}
		},
		onLoad() {
			this.imgUrl = this.$imgUrl
			if (!uni.getStorageSync('openid')) {
				
			} else {
				this.getCartNum()
			}
		},
		onHide() {
			this.Allflag = false
		},
		onShow() {
			if (!uni.getStorageSync('openid')) {
				this.isLogin = 0
			} else {
				this.isLogin = 1
				this.getCartNum()
			}
		},
		computed: {
			sumPrice() {
				let sumPrice = 0
				this.cartList.forEach(item => {
					if (item.flag) {
						sumPrice += parseFloat(item.price) * parseInt(item.goods_num)
					}
				})
				return sumPrice
			},
			number() {
				let number = 0
				this.cartList.forEach(item => {
					if (item.flag) {
						number += parseInt(item.goods_num)
					}
				})
				return number
			}
		},
		methods: {
			// 结算
			settlement() {
				let that = this
				var cartId = []
				this.cartList.forEach(item => {
					if (item.flag) {
						cartId.push(item.goods_id)
					}
				})
				if (cartId.length == 0) {
					uni.showToast({
						title: '请选择您要购买的商品',
						icon: "none"
					})
					return false
				}
				var cart_id = cartId.toString()
				var data = {
					type: '2',
					goods_ids: cart_id,
					openid: uni.getStorageSync('openid')
				}
				
				this.$myRequest.post(this.$api.order.createOrderUrl, data).then(res => {
					if (res.code == '200') {
						var orderId = res.data.id
						uni.navigateTo({
							url: "./confirmOrder/index?orderId=" + orderId
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				})
				
				

			},
			// 改变状态
			changeFlag(flag, id, idx) {
				let that = this
				that.cartList[idx].flag = !flag
				for (var i = 0; i < that.cartList.length; i++) {
					if (that.cartList[i].flag == false) {
						return this.Allflag = false
					}
					this.Allflag = true
				}
			},
			//全选
			getAllchose(status) {
				let that = this
				if (status == 0) {
					that.cartList.map(item => {
						item.flag = true
					})
					this.Allflag = true
				} else {
					that.cartList.map(item => {
						item.flag = false
					})
					this.Allflag = false
				}
			},
			// 监听金额
			goGoodsDetails() {

			},
			// 获取购物车商品总数
			getCartNum() {
				let that = this
				var data = {
					openid: uni.getStorageSync('openid')
				}
				this.$myRequest.post(this.$api.cart.cartGoodsListUrl, data).then(res => {
					if (res.code == '200') {
						res.data.data.map(item => {
							item.flag = false
						})
						that.cartList = res.data.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				})
			},
			// 加减购物车
			editNum(status, id, num) {
				let that = this
				var num = parseInt(num)
				if (status == 0) {
					console.log(num)
					if (num == 1) {
						return uni.showToast({
							title: '最少数量为1',
							icon: "none"
						})
					}
					num--
				} else {
					num++
				}
				var data = {
					openid: uni.getStorageSync('openid'),
					goods_id: id,
					goods_num: num
				}
				this.$myRequest.post(this.$api.cart.chgGoodsNumUrl, data).then(res => {
					if (res.code == '200') {
						for (var i = 0; i < this.cartList.length; i++) {
							if (id == this.cartList[i].goods_id) {
								this.cartList[i].goods_num = num
							}
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				})
			},
			// 删除商品
			bindClick(id) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '是否删除该商品',
					success: function(res) {
						if (res.confirm) {
							var data = {
								goods_id: id,
								openid: uni.getStorageSync('openid'),
							}
							that.$myRequest.post(that.$api.cart.delGoodsUrl, data).then(res => {
								if (res.code == '200') {
									that.getCartNum()
								} else {
									uni.showToast({
										title: res.msg,
										icon: "none"
									})
								}
							})
						} else if (res.cancel) {

						}
					}
				});

			},
			swipeChange(e, index) {
				console.log('当前状态：' + open + '，下标：' + index)
			},
			// 监听关闭登录弹窗
			listenToClose(msg) {
				this.isLogin = msg
			},
			listenToCloseAgain(){
				this.getCartNum()
			},
		}
	}
</script>
<style lang="scss" scoped>
	.content {
		width: 690rpx;
		margin: 0 auto;

		.list {
			display: flex;
			align-items: center;
			height: 200rpx;
			background: #FFFFFF;
			border: 1px solid #E3E3EF;
			border-radius: 10rpx;

			.shop_image {
				width: 156rpx;
				height: 156rpx;
				padding: 20rpx;
			}

			.title {
				width: 405rpx;

				.name {
					font-size: 26rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #333333;
					height: 75rpx;
					// line-height: 32rpx;
				}

				.ac {
					display: flex;
					justify-content: space-between;
					margin-top: 45rpx;

					.mony {
						color: #F21515;
						font-size: 30rpx;
					}

					.caozuo {
						.jian {
							width: 36rpx;
							line-height: 36rpx;
							color: #4b968d;
							text-align: center;
							display: inline-block;
							border: 1px solid #4b968d;
							border-radius: 4rpx;
							margin-right: 25rpx;
						}

						.jia {
							width: 36rpx;
							line-height: 36rpx;
							color: #FFFFFF;
							text-align: center;
							display: inline-block;
							border: 1px solid #4b968d;
							border-radius: 4rpx;
							background: #4b968d;
							margin-left: 25rpx;
							margin-right: 20rpx;
						}
					}
				}
			}
		}

		.dw {
			width: 750rpx;
			position: fixed;
			left: 0;
			bottom: 0rpx;
			right: 0;
			height: 90rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			z-index: 300;
			background: #fff;

			.radio {
				margin-left: 51rpx;
			}

			.right {
				display: flex;

				.hj {
					font-size: 24rpx;
					line-height: 80rpx;

					text {
						font-size: 30rpx;
						color: #F21515;
						margin-right: 30rpx;
					}
				}

				.js {
					width: 220rpx;
					line-height: 80rpx;
					font-size: 30rpx;
					color: #FFFFFF;
					background: #4b968d;
					text-align: center;
				}
			}
		}
	}
</style>
